<template>
  <div class="voiceWrapper">
    <div class="voiceBox">
      <div class="leftVoice">
        <div class="languagesName">
          <span class="topLine"></span>
          <input type="text" placeholder="请输入语种名称">
        </div>
        <div class="languagesChoose">
          <h4>语种</h4>
          <el-select v-model="languagesValue" placeholder="请选择">
            <el-option
              v-for="item in languagesOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="languagesInformant">
          <h4>发音人</h4>
          <div class="headPortrait" @click="choosePortrait">
            <img src="../../../assets/img/headwomen.png" alt="">
            <span class="follow">
              <img src="../../../assets/img/qiehuan.png" alt="">
            </span>
          </div>
          <button class="addMusicbgBtn">添加背景音乐</button>
        </div>
      </div>

      <div class="rightprogress">
        <div class="item">
          <div class="title">语速：</div>
          <my-slider
            @getSliderValue="getSpeed"
            :setValue='form.speed'
            :beforeTxt="'慢'"
            :afterTxt="'快'">
          </my-slider>
        </div>
        <div class="item">
          <div class="title">音高：</div>
          <my-slider
            @getSliderValue="getPitch"
            :setValue='form.pitch'
            :beforeTxt="'低'"
            :afterTxt="'高'">
          </my-slider>
        </div>
        <div class="item">
          <div class="title">音量：</div>
          <my-slider
            @getSliderValue="getVolume"
            :setValue='form.volume'
            :beforeTxt="'低'"
            :afterTxt="'高'">
          </my-slider>
        </div>
      </div>
      <div class="bottomwrite">
        <div class="write">
          <div>
            <img src="../../../assets/img/voiceFile.png" alt="">
            <img src="../../../assets/img/voicesave.png" alt="">
          </div>
          <textarea name="" id="" cols="20" rows="14" placeholder="请输入配音内容"></textarea>
        </div>
        <div class="Synthesis">
          <img src="../../../assets/img/play.png"  @click="listener()" alt="">
          <audio src="../../../assets/img/1.mp3" controls="controls" preload id="music1" hidden></audio>
          <h5 @click="listener()">点击试听</h5>
          <button>立即合成</button>
        </div>
      </div>
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      size="large">
      <span class="changeBroadcast">更换播音人</span>

      <!-- Swiper -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide broadcastBoxBg">
            <div>
              <img src="../../../assets/img/headwomen.png" alt="">
            </div>
            <p>标准女声</p>
            <span class="voicePlay"><img src="../../../assets/img/voiceplay.png" alt=""></span>
          </div>
          <div class="swiper-slide">
            <div>
              <img src="../../../assets/img/headwomen.png" alt="">
            </div>
            <p>标准女声</p>
            <span class="voicePlay"><img src="../../../assets/img/voiceplay.png" alt=""></span>
          </div>
          <div class="swiper-slide">
            <div>
              <img src="../../../assets/img/headwomen.png" alt="">
            </div>
            <p>标准女声</p>
            <span class="voicePlay"><img src="../../../assets/img/voiceplay.png" alt=""></span>
          </div>
          <div class="swiper-slide">
            <div>
              <img src="../../../assets/img/headwomen.png" alt="">
            </div>
            <p>标准女声</p>
            <span class="voicePlay"><img src="../../../assets/img/voiceplay.png" alt=""></span>
          </div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>

    </el-dialog>

  </div>

</template>
<script>
import MySlider from '../../../components/MySlider'
export default {
  data () {
    return {
      languagesOptions: [{
        value: '',
        label: '中文'
      }, {
        value: '选项2',
        label: '英文'
      }, {
        value: '选项3',
        label: '韩语'
      }, {
        value: '选项4',
        label: '日语'
      }],
      languagesValue: '',
      dialogVisible: false,
      form: {
        speed: 50,
        pitch: 30,
        volume: 20
      }
    }
  },
  components: {
    MySlider
  },
  methods: {
    choosePortrait () {
      this.dialogVisible = true
      this.$nextTick(() => {
      })
    },
    listener () {
      var audio = document.getElementById('music1')
      if (audio !== null) {
        // 检测播放是否已暂停.audio.paused 在播放器播放时返回false.
        // alert(audio.paused);
        if (audio.paused) {
          audio.play() // audio.play();// 这个就是播放
        } else {
          audio.pause() // 这个就是暂停
        }
      }
    },
    getSpeed (val) {
      console.log(val)
    },
    getPitch (val) {

    },
    getVolume (val) {

    }
  },
  mounted () {

  }
}
</script>
<style lang="less" scoped>
  @import "../../../assets/fetch/swiper.min.css";
  .voiceWrapper{
    height: 85.5%;
    padding: 20px;
    .voiceBox{
      width: 100%;
      height: 100%;
    }
    .leftVoice{
      width: 40%;
      height: 483px;
      float: left;
      background: #322245;
      border-radius: 8px;
      margin-bottom: 20px;
      .languagesName{
        width: 100%;
        height: 66px;
        line-height: 66px;
        text-align: center;
        margin-top: 10px;
        .topLine{
          display: block;
          width: 47px;
          height: 3px;
          background: #9487a2;
          margin-left: 47%;
        }
        input{
          width: 330px;
          height: 38px;
          background: transparent;
          border:none;
          border-bottom:1px solid #ebdff9;
          outline: none;
          text-align: center;
          color: #ebdff9;
          font-size: 16px;
          &::-webkit-input-placeholder { /* WebKit browsers */
            color:#999;
            text-align: center;
          }
          &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color:#999;
            text-align: center;
          }
          &::-moz-placeholder { /* Mozilla Firefox 19+ */
            color:#999;
            text-align: center;
          }
          &:-ms-input-placeholder { /* Internet Explorer 10+ */
            color:#999;
            text-align: center;
          }
        }
      }
      .languagesChoose{
        width: 100%;
        text-align: center;
        h4{
          font-size: 14px;
          color: #c59fec;
          font-weight: normal;
        }
        .el-select{
          width: 333px;
          height: 42px;
        }
        .el-input__inner{
          background: #f5ecff;
        }
      }
      .languagesInformant{
        width: 100%;
        text-align: center;
        h4{
          font-size: 14px;
          color: #c59fec;
          font-weight: normal;
        }
        .headPortrait{
          position: relative;
          img{
            width: 160px;
            height: 160px;
          }
          .follow{
            display: inline-block;
            width: 36px;
            height: 36px;
            position: absolute;
            bottom: 8px;
            right: 19rem;
            img{
              width: 100%;
              height: 100%;
            }
          }
        }
        .addMusicbgBtn{
          width: 132px;
          height: 39px;
          background: url("../../../assets/img/voiceBtn.png") no-repeat;
          background-size: 100% 100%;
          border: none;
          outline: none;
          color: #fff;
          font-size: 14px;
          margin-top: 7px;
        }

      }
    }
    .rightprogress{
      width: 59%;
      height: 483px;
      float: right;
      background: #322245;
      border-radius: 8px;
      margin-bottom: 20px;
      .item {
        width: 80%;
        display: flex;
        height: 40px;
        align-items: center;
        margin: 66px;
        .slide-container{
          color: #c59fec;
        }
        .title {
          color: #fff;
          font-size: 16px;
          width:65px;
          line-height: 21px;
          height: 21px;
        }
      }
    }
    .bottomwrite{
      clear: both;
      width: 100%;
      height: 40%;
      background: #322245;
      border-radius: 8px;
      .write{
        width: 75%;
        float: left;
        padding: 15px 0 20px 20px;
        img{
          width: 50px;
          height: 50px;
        }
        textarea{
          width: 100%;
          background: #4f415f;
          resize: none;
          padding: 10px;
          margin-top: 10px;
        }
      }
      .Synthesis{
        width: 20%;
        height: 100%;
        float: right;
        text-align: center;
        img{
          width: 127px;
          height: 127px;
          margin-top: 36px;
        }
        h5{
          color: #72598d;
          font-size: 12px;
          font-weight: normal;
        }
        button{
          width: 222px;
          height: 50px;
          border:1px solid #d5adff;
          color: #d5adff;
          background: transparent;
          outline: none;
          border-radius: 30px;
        }
      }
    }
    .el-dialog{
      .changeBroadcast{
        display: inline-block;
        position: absolute;
        width: 110px;
        height: 31px;
        line-height: 31px;
        text-align: center;
        color: #fff;
        top: 12px;
        left: 0;
        background: url("../../../assets/img/changeBg.png") no-repeat;
        background-size: 100% 100%;

      }

      .swiper-container {
        width: 100%;
        height: 100%;
        .broadcastBoxBg{
          background: linear-gradient(to right, #b260ff , #891fff);
        }
      }
      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #5c4f6b;
        /*width: 172px !important;
        height: 184px !important;*/
        /* Center slide text vertically */
        /*display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;*/
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        border-radius: 10px;
        position: relative;
        div{
          margin-top: 18px;
          img{
            width: 112px;
            height: 112px;
          }
        }
        p{
          width: 100%;
          color:#fff;
          font-size: 16px;
        }
        .voicePlay{
          position: absolute;
          bottom: 20px;
          right: 0px;
        }
      }
    }
  }
</style>
